<template>
  <div style="height:100%;">
    <div
      class="header-all"
      v-if="false"
    >
      <p :class="[typeActive === '总数' ? 'type-active': '']">
        总数：
        <span
          class="type-value"
          @click="changeData('总数')"
        >
          {{ cover.records.length }}
        </span>
      </p>
      <p :class="[typeActive === '正常' ? 'type-active': '']">
        正常：
        <span
          class="type-value"
          @click="changeData('正常')"
        >
          {{ coverNormalList.length }}
        </span>
      </p>
      <p :class="[typeActive === '遮挡' ? 'type-active': '']">
        遮挡：
        <span
          class="type-value"
          @click="changeData('遮挡')"
        >
          {{ coverAbnormalList.length }}
        </span>
      </p>
    </div>
    <div class="header-count">
      <div class="count-item">
        <span class="title">总数：</span><span class="num">10</span>
      </div>
      <div class="count-item">
        <span class="title">正常：</span><span class="num">10</span>
      </div>
      <div class="count-item">
        <span class="title">遮挡：</span><span class="num">20</span>
      </div>
    </div>
    <div class="table-content">
      <div style="padding: 10px 0; display: flex; align-items: center; ">
        <el-button
          size="mini"
          type="plain"
          @click="download"
          :disabled="batchFile.loading"
          :icon="batchFile.loading ? 'el-icon-loading' : 'el-icon-download'"
        >
          {{ batchFile.loading ? '下载中....' : '下载' }}
        </el-button>
        <span class="download-all">下载全部</span>
        <div />
      </div>
      <el-table
        :data="tableData"
        border
        element-loading-text="拼命加载中"
        height="calc(100% - 45px)"
        ref="mainTable"
        size="mini"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          :selectable="(row) => !!row.afterAddr"
          width="55"
        />
        <el-table-column
          label="序号"
          show-overflow-tooltip
          type="index"
          width="50"
        />
        <el-table-column
          label="原视频地址"
          min-width="120"
          prop="beforeAddr"
          show-overflow-tooltip
        />
        <el-table-column
          label="识别后地址"
          min-width="120"
          prop="afterAddr"
          show-overflow-tooltip
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              @click="lookItem(scope.row)"
              size="small"
              style="color:green;"
              type="text"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import { Handle } from '@/store/modules/handle/mixins'
// import { BatchFile } from '@/facade/download'
export default {
  data(){
    return{
      loading: false,
      info: {},
      index: 0,
      ids: [],
      typeObj: {
        0: '正常',
        1: '遮挡'
      },
      typeArr: ['总数', '正常', '遮挡'],
      selectionList: [],
      batchFile: ''
    }
  },
  props:{
    lkjId: {
      type: String,
      default: ''
    }
  },
  methods: {
    tableData() {
      let tableData = []
      switch (this.typeActive) {
        case '总数':
          tableData = this.cover.records
          break
        case '正常':
          tableData = this.coverNormalList
          break
        case '遮挡':
          tableData = this.coverAbnormalList
          break
        default:
          break
      }
      return tableData
    },
    lookItem(){
      this.$emit('look-item',{ row, type: 'arr' })
    },
    changeData(type) {
      if (this.typeActive === type) return
      this.typeActive = type
    },
    download() {
      if (this.selectionList.length <= 0) {
        this.$message.warning('请选择要下载的数据！')
        return false
      }
      const params = this.selectionList.map((item) => {
        return {
          name: item.afterAddr,
          url: item.afterAddr,
          suffix: 'mp4'
        }
      })
      this.batchFile.addBatch(params)
    },
    handleSelectionChange(val) {
      this.selectionList = val
    }
  },
}
</script>

<style scoped>
.table-content {
  height: calc(100% - 80px);
  padding:0 16px;
}
.mainTable {
  height: calc(100% - 80px)!important;
  overflow-y: scroll;
}
.header-count{
  height:72px;
  line-height:72px;
  text-align:center;
  border-bottom: 1px solid #e6e6e6;
}
  .count-item{
    float:left;
    width:33.33%;
    position:relative;
    font-size:18px;
  }
  .count-item:not(:last-child):after{
    content:'';
    width:1px;
    height:48px;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-24px;
    background:#E5E5E5;
  }
  .num{
    color:#1890FF;
  }
.download-all{
  margin-left:10px;
  font-size:12px;
  text-decoration: underline;
  color:#0091FF;
  cursor:pointer;

}
.download-all:hover{
  color:#11A2FF;
}
</style>
